<template>
    <card
        :title="$t('wp-shu-ju-jian-ce')"
        :titleBolder="true">
        <div class="monitor-box">
            <div
                class="monitor-line">
                <div class="monitor-line-left">{{ $t('wp-jia-gong-can-shu') }}</div>
                <div class="monitor-line-right">{{ $t('wp-dang-qian-zhi') }}</div>
            </div>
            <template
                v-if="listData.length > 0">
                <template
                    v-for="(item, index) in listData"
                    :key="index">
                    <div
                        class="monitor-line"
                        v-show="isCollpaseParamItem(index)">
                        <div class="monitor-line-left">{{ $st(item.status) }}</div>
                        <div class="monitor-line-right">{{ $format(item.status, item.value) }}</div>
                    </div>
                </template>
            </template>
            <wp-null-data-area
                class="no-data"
                :null-data-msg="$st('wp_No_data')"
                v-if="listData.length === 0"
                null-text-msg-color="rgba(0,0,0,0.6)"
            />
        </div>
        <div
            class="collapse-btn"
            v-show="is_expand"
            @click="collpaseParam">
            {{ $t('zhe-die') }}
            <wp-icon name="arrow-up" />
        </div>
        <div
            class="expand-btn"
            v-show="isNeedCollpase() && (!is_expand) "
            @click="expandParam">
            {{ $t('zhan-kai') }}
            <wp-icon name="pulldown" />
        </div>
    </card>
</template>
<script>
import { reactive, toRefs, onActivated, onDeactivated } from 'vue';
import card from '@/components/_common/card.vue';
import { deviceviewSetup } from '@/setup/deviceview/deviceviewSetup.js';

export default {
    components: {
        card
    },
    props: {
        uuid: String
    },
    setup (props, ctx) {
        const { getMachineParametersValue } = deviceviewSetup();

        const state = reactive({
            listData: [],
            collapse_number: 10,
            is_expand: false,
            paramstimer: null,
            hideStatusArr: ['WHstatus_Timeline', 'WHstatus_Efficiency', 'WHstatus_DownloadFile', 'WHstatus_DownloadProgress', 'WHstatus_DownloadStatus', 'WHstatus_TechnicInfo']
        });

        // 通过uuid获取监测数据
        const getDeviceParamValue = () => {
            getMachineParametersValue({
                uuid: props.uuid
            }).then((data) => {
                state.listData = data.status_snapshot.filter(child => {
                    return state.hideStatusArr.indexOf(child.status) === -1;
                });
            });
        };

        // 展开
        const expandParam = () => {
            state.is_expand = true;
        };

        // 折叠
        const collpaseParam = () => {
            state.is_expand = false;
        };

        // 是否显示展开按钮
        const isNeedCollpase = () => {
            if (state.collapse_number < state.listData.length && state.listData.length !== 0) {
                return true;
            }
            return false;
        };

        // 当前行是否显示
        const isCollpaseParamItem = (index) => {
            if (state.is_expand) {
                return true;
            }
            if (index + 1 < state.collapse_number) {
                return true;
            }
            return false;
        };

        onDeactivated(() => {
            state.paramstimer && clearInterval(state.paramstimer);
        });

        onActivated(() => {
            if (!props.uuid) return;
            getDeviceParamValue();
            state.paramstimer = setInterval(() => {
                getDeviceParamValue();
            }, 15000);
        });

        return {
            ...toRefs(state),
            isCollpaseParamItem,
            expandParam,
            collpaseParam,
            isNeedCollpase
        };
    }
};
</script>
<style scoped lang="scss">
.monitor-box {
    border: 0.5px solid #e5e5e5;
    .monitor-line {
        padding: 10px;
        display: flex;
        font-size: 13px;
        .monitor-line-left {
            width: 130px;
            padding-right: 10px;
            box-sizing: border-box;
            word-break: break-word;
        }
        .monitor-line-right {
            flex: 1;
            word-break: break-word;
        }
        &:first-of-type {
            font-weight: 600;
        }
        &:nth-of-type(even) {
            background-color: #F4F8FB;
        }
    }
}
.collapse-btn {
    text-align: center;
    padding: 10px 0 0;
}

.expand-btn {
    text-align: center;
    padding: 10px 0 0;
}

.no-data {
    margin-bottom: 10px;
    font-size: 13px;
}
</style>
